<template>
  <div class="wrap-v1 container">
    <div class="nav">
      <el-scrollbar :native="true">
        <el-menu :style="{ height: '100%' }" router>
          <el-menu-item-group v-for="menu in menus" :key="menu.title">
            <template slot="title">{{ menu.title }}</template>
            <el-menu-item v-for="(menuItem, index) in menu.child" :key="index" :index="menuItem.path">{{ menuItem.name
            }}</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="wrap-v2 paddingCode">
      <el-scrollbar :native="true">
        <router-view />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
defineProps({
  menus: {
    type: Array,
    require: true,
  },
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  height: 100%;

  .nav {
    flex: 1;
    height: 100%;
  }

  .paddingCode {
    padding: 0.4rem;
  }

  .el-scrollbar {
    width: 100%;
    height: 100%;
  }
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
  overflow-y: auto;
}
</style>
